<template>
	<el-dialog
	  :visible.sync="state.visible"
	  :fullscreen="fullscreen"
	  :custom-class="!fullscreen ? 'custom-height': 'custom-fullscreen'"
	  :close-on-click-modal="false"
	  :show-close="false"
	  @closed="close"
	>
		<el-row slot="title" type="flex">
			<el-col :span="20">{{ title }}</el-col>
			<el-col :span="4" style="text-align: right">
				<svg-icon
				  :icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
				  style="cursor: pointer; margin-right: 10px"
				  @click="() => {fullscreen = !fullscreen}"
				/>
				<i class="el-icon-close" style="cursor: pointer" @click="close" />
			</el-col>
		</el-row>
		<el-form ref="dataForm" :model="form" label-position="right" label-width="100px">
  <el-row :gutter="18">
  
	  <!-- <el-col :span="24">
		<el-form-item
		  label="金额"
		>
		<el-input-number
		  v-model="form.price"
		  controls-position="right"
		  placeholder="请输入金额"
		/>
		</el-form-item>
	  </el-col> -->
	  <el-col :span="24"  v-if="form.id == null">
        <el-form-item
          label="采购单"
        >
          <el-select
            filterable
            placeholder="请选择采购单"
            v-model="form.procurementOrderId"
            @change="changeProcurementOrder"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in more.procurementOrderOptions"
              :key="index"
              :value="`${item.value}`"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="24"  v-if="form.id == null">
        <el-form-item
          label="采购单项"
        >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; height: 600rpx;"
          
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量"
            width="120">
          </el-table-column>
          <el-table-column
            label="单位"
            width="120">
            <template slot-scope="scope">{{ scope.row.unitName }}</template>
          </el-table-column>
          <!-- <el-table-column
            prop="status"
            label="状态"
            width="120">
          </el-table-column> -->
        </el-table>
        <!-- <div style="margin-top: 20px">
          <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div> -->
        </el-form-item>
      </el-col>
	  <el-col :span="24" v-if="form.id == null">
        <el-form-item
          label="库房"
        >
        <el-cascader v-model="form.shelves" :props="props"></el-cascader>
          <!-- <el-select
            filterable
            placeholder="请选择库房"
            v-model="form.shelvesId"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in more.shelvesOptions"
              :key="index"
              :value="`${item.value}`"
              :label="item.label"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="form.id != null">
		<el-form-item
		  label="采购单"
		>
    {{ form.procurementOrderId }}
		
		</el-form-item>
	  </el-col>
      <el-col :span="24" v-if="form.id != null">
		<el-form-item
		  label="采购项"
		>
    {{ form.procurementOrderItemName }}
		
		</el-form-item>
	  </el-col>
      <el-col :span="24" v-if="form.id != null">
		<el-form-item
		  label="数量"
		>
		<el-input-number
		  v-model="form.quantity"
		  controls-position="right"
		  placeholder="请输入数量"
		/>
		</el-form-item>
	  </el-col>
	 <!-- <el-col :span="24">
		<el-form-item
		  label="快递单号"
		>
		<el-input
		  v-model="form.expressNo"
		  controls-position="right"
		  placeholder="请输入快递单号"
		/>
		</el-form-item>
	  </el-col> -->
	  <!-- <el-col :span="24">
        <el-form-item
          label="状态"
        >
          <el-select
            filterable
            placeholder="请选择状态"
            v-model="form.status"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in more.stockStatusOptions"
              :key="index"
              :value="`${item.value}`"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
	  <!-- <el-col :span="24">
		<el-form-item
		  label="附件"
		>
		<el-input
		  v-model="form.ext"
		  controls-position="right"
		  placeholder="请输入附件"
		/>
		</el-form-item>
	  </el-col>
	  <el-col :span="24">
		<el-form-item
		  label="附件数量"
		>
		<el-input-number
		  v-model="form.extQuantity"
		  controls-position="right"
		  placeholder="请输入附件数量"
		/>
		</el-form-item>
	  </el-col> -->
  </el-row>
  </el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">
				取消
			</el-button>
			<el-button type="primary" :loading="state.confirmSubmit" :disabled="state.confirmSubmit" @click="onSubmit(false)">
				确定
			</el-button>
		</div>
	</el-dialog>
  </template>
  
  <script>
  import { dibootApi } from '@/utils/request'
  import form from '@/components/diboot/mixins/form'
  export default {
    name: 'procurementStockForm',
    mixins: [form],
    components: {
    },
    data() {
      return {
        tableData: [],
        storeroom: [],
        shelves: [],
        baseApi: '/procurementStock',
        attachMoreList: [
            {
              target: 'procurementOrder',
              label: 'name',
              value: 'id'
            },
            {
              target: 'storeroom',
              label: 'name',
              value: 'id'
            },
            {
              target: 'stockStatus'
            },
            {
              target: 'express',
              label: 'name',
              value: 'id'
            }
          ],
          multipleSelection: [],
          props: {
            lazy: true,
            async lazyLoad (node, resolve) {
              const { level } = node;
              console.log(node)
              if(level == 0) {
                const res2 = await dibootApi.get(`/storeroom/list`)
                if (res2.code === 0) {
                  this.storeroom = res2.data.map(item => ({
                    value: item.id,
                    label: item.name,
                    leaf: level >= 1
                  }));
                  resolve(this.storeroom);
                }
              } else {
                const res1 = await dibootApi.get(`/shelves/list?storeroomId=${node.data.value}`)
                if (res1.code === 0) {
                  this.shelves = res1.data.map(item => ({
                    value: item.id,
                    label: item.name,
                    leaf: level >= 1
                  }));
                  resolve(this.shelves);
                }
              }
              
              // setTimeout(() => {
              //   const nodes = Array.from({ length: level + 1 })
              //     .map(item => ({
              //       value: ++id,
              //       label: `选项${id}`,
              //       leaf: level >= 2
              //     }));
              //   // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              //   resolve(nodes);
              // }, 1000);
            }
          }
      }
    },
    methods: {
      async changeProcurementOrder(value) {
        this.form.procurementOrderId = value
        const res2 = await dibootApi.get(`/procurementOrderItem/list?procurementOrderId=${value}`)
        if (res2.code === 0) {
          this.tableData = res2.data
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.form.procurementStockList = this.multipleSelection
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  </style>
  